import React, {createContext, useEffect} from 'react';
import {App, ConfigProvider} from "antd";
import zhCN from "antd/es/locale/zh_CN";
import 'dayjs/locale/zh-cn';
import './index.less'
import useBaseFontSize from "@/hooks/useBaseFontSize.ts";
import EscapeAntd from "@/theme/EscapeAntd.tsx";

import AppConfig from "@/config"

/**
 * 主题配置
 */
const Theme: React.FC<{ children: any }> = ({children}) => {
  //1rem 对应的的px值
  const baseFontSize = useBaseFontSize();

  //表单组件统一样式
  const FORM_ITEM_THEME = {
    //border颜色
    colorBorder: "rgba(134,218,255,0.5)",
    //组件背景色
    colorBgContainer: "transparent",
    //组件字体颜色
    colorText: 'rgba(255,255,255,.95)',
    //sm组件水平padding
    paddingContentHorizontalSM: 7 * baseFontSize,
    //解决sm组件 input和select 高度不一致的问题
    lineHeight: 1.4
  }

  //下拉类型组件统一样式
  const SELECT_ITEM_THEME = {
    ...FORM_ITEM_THEME,
    //选中元素背景色
    controlItemBgActive: 'rgba(31,158,197,0.3)',
    //hover背景色 和下方itemHoverBg需要测一下有何不同
    controlItemBgHover: 'rgba(31,158,197,0.15)',
    //下拉弹出框整体背景色
    colorBgElevated: 'rgba(2,54,94,0.98)',
    //下拉框右侧图标颜色
    colorTextQuaternary: 'rgba(255,255,255,.45)',
    //多选框，选中元素的背景色
    colorFillSecondary: 'rgba(255,255,255,.2)',
  }
  useEffect(() => {
    window._AMapSecurityConfig = {
      securityJsCode: AppConfig?.map.securityJsCode
    }
  }, [])
  return <ConfigProvider
    theme={{
      token: {
        //主题色 修改主题时需要在index.less中同步设置--primary
        colorPrimary: '#40BFFF',
        //默认字体颜色
        colorText: 'rgba(255,255,255,.95)',
        //link类型颜色
        colorLink: '#40BFFF',
        //描述字体颜色 例: TextArea下方的字体限制的颜色
        colorTextDescription: 'rgba(255,255,255,.55)',
        //placeholder字体颜色
        colorTextPlaceholder: 'rgba(255,255,255,.45)',
        //disabled元素的字体颜色
        colorTextDisabled: 'rgba(255,255,255,.25)',
        //组件中涉及到icon的颜色
        colorIcon: 'rgba(255,255,255,.55)',
        //默认border radius
        borderRadius: baseFontSize * 3,
        //默认字体大小
        fontSize: 16 * baseFontSize,
        controlHeight: baseFontSize * 32,
        controlHeightSM: baseFontSize * 24,
      },
      components: {
        Tabs: {
          //未选中tab背景色
          cardBg: 'rgba(47,153,197,0.2)',
          //选中tab背景色
          colorBgContainer: 'rgba(47,153,197,0.8)',
          //选中tab文字颜色
          itemSelectedColor: '#fff',
          //hover文字颜色
          itemHoverColor: '#fff',
          //tab底部横线颜色
          colorBorderSecondary: 'rgba(47,153,195,0.2)',
        },
        Card: {
          paddingLG: 24 * baseFontSize,
          //card整体背景色
          colorBgContainer: 'rgba(47,153,195,0.1)',
          //card中所有线的颜色
          colorBorderSecondary: 'rgba(47,153,197,0.2)',
        },
        Button: {
          //default类型button 背景色
          colorBgContainer: 'rgba(255,255,255,0.1)',
          //default类型button border颜色
          colorBorder: 'rgba(47,153,195,0.2)',
          //smallButton lineHeight
          lineHeight: 1,
          paddingContentHorizontal: baseFontSize * 16
        },
        Form: {
          //form 表单 label颜色
          colorTextHeading: 'rgba(255,255,255,.95)',
        },
        Input: {...FORM_ITEM_THEME},
        InputNumber: FORM_ITEM_THEME,
        Select: SELECT_ITEM_THEME,
        Cascader: SELECT_ITEM_THEME,
        DatePicker: SELECT_ITEM_THEME,
        Table: {
          //表头文字颜色
          colorTextHeading: 'rgba(255,255,255,.95)',
          //表格内容文字颜色
          colorText: 'rgba(255,255,255,.95)',
          //表格背景色
          colorBgContainer: 'transparent',
          //表头背景色，选中元素背景色，hover行背景色
          colorFillAlter: 'rgba(47,153,197,0.2)',
          //表格线颜色
          colorBorderSecondary: 'rgba(47,153,197,0.3)'
        },
        Pagination: {
          //页码背景色
          colorBgContainer: 'transparent',
          //disabled背景色
          controlItemBgActiveDisabled: 'rgba(255,255,255,.1)',
          //边框颜色
          colorBorder: "rgba(47,153,197,0.5)",
          //disabled字体颜色
          colorTextDisabled: 'rgba(255,255,255,0.5)',
          //默认字体颜色
          colorText: 'rgba(255,255,255,.95)'
        },
        Modal: {
          //标题字体颜色
          titleColor: 'rgba(255,255,255,.95)',
          //弹出框头部背景色
          headerBg: 'transparent',
          //弹出框内容背景色 修改主题时需要在index.less中同步设置@modal-color
          contentBg: 'rgba(1, 56, 101, 0.7)'
        },
        Tree: {
          //背景色
          colorBgContainer: 'transparent',
          //字体颜色
          colorText: '#ffffff'
        },
        Divider: {
          //分割线颜色
          colorBorder: 'rgba(255,255,255,.95)'
        },
        Tag: {
          //tag边框颜色
          colorBorder: "rgba(47,153,197,0.5)",
        },
        Dropdown: {
          ...SELECT_ITEM_THEME,
          //弹出框阴影
          boxShadowSecondary: '0 6rem 16rem 0 rgba(255,255,255, 0.12),0 3rem 6rem -4rem rgba(255,255,255, 0.12),0 9rem 28rem 8rem rgba(255,255,255, 0.05)',
          //弹出框背景色
          colorBgElevated: 'rgba(2,54,94,0.98)',
        },
        Breadcrumb: {
          //面包屑非最后一个的颜色 例: '运维中心>用户中心>用户管理' 中 '运维中心>用户中心>' 的颜色
          colorTextDescription: 'rgba(255,255,255,.95)'
        },
        //配合{@link @/layouts/header/index.module.less}中定制菜单配置
        Menu: {
          //菜单字体颜色
          itemColor: 'rgba(255, 255, 255, .95)',
          //菜单整体背景色
          colorBgContainer: "transparent",
          //菜单字体大小
          fontSize: baseFontSize * 16,
          //子菜单整体背景色
          colorBgElevated: 'rgba(1, 56, 101, 0.7)',
          //子菜单选中背景色
          controlItemBgActive: 'rgba(31,158,197,0.3)',
          //子菜单hover背景色
          itemHoverBg: 'rgba(31,158,197,0.15)',
          //子菜单shadow
          boxShadowSecondary: '1rem 1rem 5rem rgba(97,141,177,.75)',

        },
        Message: {
          //message字体颜色
          colorText: 'rgba(0,0,0,.8)'
        },
        Radio: {
          colorText: 'rgba(255,255,255,.65)',
          //背景色
          colorBgContainer: 'transparent',
          //线颜色
          colorBorder: "rgba(134,218,255,0.3)",
          //选中按钮背景
          buttonCheckedBg: 'rgba(31,158,197,0.2)'
        },
        Statistic: {
          fontSize: 18 * baseFontSize,
          colorTextDescription: 'rgba(255,255,255,.95)',
          colorTextHeading: '#32c5ff'
        },
        Empty: {
          colorTextBase: 'rgba(255,255,255,.95)',
        }
      }
    }}
    locale={zhCN}>
 
      <App>
        <EscapeAntd/>
        {children}
      </App>
  </ConfigProvider>

};

export default Theme;
